<template>
  <div class="login-page" @keyup.13="handleSubmit" v-if="pageShow">
    <el-container class="login-page__wrapper" >
      <el-main>
        <div class="login-page__logo"></div>
        <div class="login-page__name"></div>
        <div class="login-page__main">
          <el-form ref="form" class="login-page__form" inline :model="loginForm">
            <el-form-item style="margin-bottom:0">
              <el-button type="success"  class="login__btn"  @click="login">PKI登录</el-button>
            </el-form-item>
          </el-form>
          <div class="copyright">@2018 厦门出入境</div>
        </div>
      </el-main>
    </el-container>
    <register-dialog :visible="registerShow" :data="saveData" @success="registered"></register-dialog>
  </div>

</template>


<script>
import authMixin from '@/base/mixin/auth';
import cookie from '@/helper/cookie';
import { save } from '@/utils/storage';
import RegisterDialog from '@/components/common/register-dialog';
import { PKI_LOGIN } from '@/config';
export default {
  mixins: [authMixin],
  components: {
    RegisterDialog
  },
  data() {
    return {
      // registerShow: true,
      PKI_LOGIN,
      registerShow: false,
      saveData: null,
      pageShow: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.login();
        }
      });
    },
    login() {
      let callbackUrl = encodeURIComponent(
        window.location.host + window.location.pathname
      );
      let callbackRouter = encodeURIComponent(
        window.location.hash.replace('#', '')
      );
      window.location.href = `${
        this.PKI_LOGIN
      }?loginreturn=${callbackUrl}&loginrouter=${callbackRouter}`;
    },
    registered(obj) {
       save('task_userInfo', obj);
       this.$router.push('/task-feedback/task')
    }
  },
  created() {
    let session = this.$route.query.session;
    if (session) {
      cookie('SESSION', session);
      this.checkLogin({}).then(res => {
        this.saveData = Object.assign({}, res)
        let require = ['xm', 'jh', 'sfzh', 'dw', 'sjhm'];
        // 如果缺少资料，则打开弹出框
        require.forEach(r => {
          if (!res[r]) {
            this.registerShow = true;
          }
        });
        // 如果没有弹出框，表明资料齐全，则跳到任务页
        if(!this.registerShow) {
          // 记录信息到sessionStorage
          this.registered(res);
        }
        this.pageShow = true;
      }).catch(res => {
        this.$message({
          type: 'warning',
          message: '获取用户信息失败'
        });
        this.$router.push('/login')
      });
    } else {
       this.pageShow = true;
    }
  }
};
</script>
<style type="text/scss" lang="scss">
@import '../style/vars';

.video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.1;
}

.login-page {
  width: 100%;
  height: 100%;
  background: url('../assets/images/login_line.jpg') #020d45 repeat-y center
    center;
  min-height: 600px;
  position: relative;

  &__wrapper {
    width: 100%;
    height: 100%;
    background: url('../assets/images/dintu.jpg') no-repeat center center;
    position: absolute;
    text-align: center;
    background-size: auto;
    padding: 0;
  }
  &__logo {
    width: 300px;
    height: calc(100vh * 0.2);
    min-height: 200px;
    background: url('../assets/images/biaozhin.png') no-repeat center center;
    margin: auto;
    margin-top: 8%;
  }
  &__name {
    font-size: 34px;
    color: #fff;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    text-shadow: 3px 3px 3px #333;
    // margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 5px;
  }
  &__main {
    width: 421px;
    margin: auto;
  }
  &__info {
    text-align: left;
    margin-top: 10px;
  }
  &__form{
    .login__btn, .login__btn:hover{
      background-color: rgb(221, 221, 221);
      border-color: 1px solid rgb(221, 221, 221);
      line-height: 41px;
      width:160px;
      font-size: 30px;
      font-family: Arial, Helvetica, sans-serif;
    }
  }
  .copyright{
    font-size: 13px;
    padding:20px;
    color: #fff;
  }
  .el-input {
    width: 250px;
  }
  .el-form {
    background: rgba(0, 0, 0, 0.45);
    // padding-top: 20px;
    text-align: center;
    border-radius: 6px;
    position: relative;
    z-index: 3;
  }
  .el-form-item:last-child {
    margin-right: 0;
  }
  .el-input-group__prepend {
    padding: 0 10px;
    background: #39c;
    color: #fff;
    border: none;
  }
  .el-input__inner {
    font-size: 16px;
  }
  .el-input__inner:focus {
    background: $--color-primary-light-9;
  }
  .el-form-item.is-error {
    .el-input__inner {
      background: $--color-danger-light;
    }
  }
  .el-main {
    padding: 0;
  }
  .el-footer {
    color: #ccc;
    background: rgba(0, 0, 102, 0.3);
    line-height: 30px;
  }
}
</style>
